import React, { Component, PropTypes } from 'react'
import NavLink from './NavLink'

class SideNav extends Component {

	constructor (props, context) {
	    super(props, context)
	    console.log("初始化")
	    const activeS = {
	    	"color": "#f3927f",
    		"borderRight": "5px solid #f3927f"
	    };

	    this.state = {activeS: activeS, activeItem: ''} // 初始化状态
	  }

	handleClick(e) {
		this.setState({activeItem: e.target.innerText})
	}

	render() {
		const {navItem, selfStyle} = this.props;

		return (
			<div className="left-wapper" style={selfStyle}>
				<ul role="nav" className="SideNavWapper">
					{navItem.map(item => 
						item.onlyActiveOnIndex ? <li className="SideNavItem" key={item.itemName} onClick={(e) => this.handleClick(e)}><NavLink to={item.route} onlyActiveOnIndex className="SideNavA" style={this.state.activeItem == item.itemName ? this.state.activeS : {}}>{item.itemName}</NavLink></li>
						: <li className="SideNavItem" key={item.itemName} onClick={(e) => this.handleClick(e)}><NavLink to={item.route} className="SideNavA" style={this.state.activeItem == item.itemName ? this.state.activeS : {}}>{item.itemName}</NavLink></li>
					)}
		        </ul>
			</div>
				
		)
	}
}

export default SideNav